﻿/**
 *	html/monitor/center/scene/panel_scene.js
 *
 *	(C) 2014 Yuanjj
 *
 * 	history:
 * 		2014-07-15		create the file
 */

var g_bg_div 		= "bg_div";
var g_bg_scene		= "bg_scene";
var g_dg_group		= "addgroup";
var g_width			= 1146;
var g_height		= 768;
var g_icon_width	= 72;
var g_icon_height	= 55;
var g_scale			= 1;
var g_panel_scene;

/**
 *	create scene panel
 *
 *	@panel_center		[in] the center panel object
 *	@showflag			[in] the show flag ( "show" or "hide" )
 *
 *	return
 *		void
 */
function create_scene_panel( panel_center, showflag )
{
    var record			= g_scene.getAt( 0 );
    var	src				= (undefined === record) ? ("") : record.get( "scene" );
    var	htmltext 		= 	"<div id=\"" + g_bg_div + "\">" +
                                "<img id=\"" + g_bg_scene + "\" src=\"" + src + "\"/>" +
                            "</div>";

    g_panel_scene = new Ext.panel.Panel
    ({
         laytou:"absolute",
         id:"panel_c_scene",
         flex:1,
         width:"100%",
         autoScroll:true,
         defaults:{ floating:true },
         html:htmltext,
         listeners:
         {
             render:on_create_control,
             afterrender:on_load_device,
             resize:on_resize,
         }
    });

    _build_device_show( g_panel_scene );

    if ( "show" === showflag )
        g_panel_scene.show();
    else
        g_panel_scene.hide();

    panel_center.add_subpanel( g_panel_scene );
}

/**
 *	create a slider for scene
 *
 *	@obj			[in] the component object
 */
function on_create_control( obj )
{
    g_panel_scene.vertical_slider 	= _create_vertical_slider( "panel_c_scene", 300, 100, 10 );
    g_panel_scene.setting_button	= _create_setting_button( "panel_c_scene" );
}

/**
 *	create a vertical slider
 *
 *	@renderid			[in] the id of element that to be randered
 *	@height				[in] the slider height
 *	@max				[in] the max value of slider
 *	@min				[in] the min value of slider
 *
 *	return
 *		the slider object
 */
function _create_vertical_slider( renderid, height, max, min )
{
    var slider_scale = new Ext.slider.Single
    ({
         id:"bg_slider", renderTo:renderid, autoShow:true, floating:true, height:height,
         vertical:true, value:50, increment:1, maxValue:max, minValue:min, x:10, y:10,
         listeners:{ change:on_slider_changed }
    });

    //slider_scale.getEl().setStyle( "z-index", "0000" );

    return slider_scale;
}

/**
 *	create setting button
 *
 *	@renderid			[in] the id of element that to be randered
 *
 *	return
 *		the setting button object
 */
function _create_setting_button( renderid )
{
    var x = g_panel_scene.getWidth() - 50;
    var setting_button = new Ext.button.Button
    ({
        text:"修改场景", width:60,
        floating:true, x:x, y:10,
        renderTo:renderid,
        handler:__select_bg_scene,
    });

    setting_button.hide();

    return setting_button;
}

/**
 *	setting button handler
 */
var g_bg_select_form;
function __select_bg_scene()
{
    var record	= g_scene.getAt( 0 );

    if ( undefined === g_bg_select_form )
        g_bg_select_form = __create_bg_select_form();
    g_bg_select_form.loadRecord( record );
    g_bg_select_form.show();
    _enable_windows( false );
}

/**
 *	create form for selecting back ground
 */
function __create_bg_select_form()
{
    var form_select = new Ext.form.Panel
    ({
         title:"更新背景图片",
         draggable:true,
         frame:true,
         floating:true,
         renderTo:Ext.getBody(),
         layout:{type:"hbox", align:"stretch"},
         items:[
             {id:"scene_bg", name:"scene", xtype:"textfield", fieldLabel:"背景图片", labelWidth:60, width:300},
             {id:"scene_bg_button", name:"button", xtype:"button", text:"选择图片", width:60,
                 handler:on_file_select, file_select:scene_file_select},
         ],
         buttons:[
             {text:"确定", handler:on_bg_select_form_ok},
             {text:"取消", handler:on_bg_select_form_cancel},
         ]
    });

    return form_select;
}

/**
 *	select file back
 *
 *	@path			[in] the selected file path
 */
function scene_file_select( path )
{
    var	scene_cmp	= Ext.getCmp( "scene_bg" );

    scene_cmp.setValue( path );
}

/**
 *	select form ok button
 */
function on_bg_select_form_ok()
{
    var values		= g_bg_select_form.getValues();
    var record 		= g_bg_select_form.getRecord();
    var	new_scene	= values["scene"];
    var old_scene;

    if ( undefined !== record )
        old_scene	= record.get( "scene" );
    else
        g_scene.insert( 0, [[0, new_scene]] );

    if ( new_scene !== old_scene )
        qt_html.save_scene( new_scene, 1 );

    g_bg_select_form.updateRecord();
    g_bg_select_form.hide();
    _enable_windows( true );
}

/**
 *	callback function for setting new scene
 *
 *	@scene			[in] the scene file path
 *	@width			[in] the new file width
 *	@height			[in] the new file height
 */
function callback_new_scene( scene, width, height )
{
    alert( scene );
    var scene_dom 		= Ext.getDom( g_bg_scene );
    scene_dom.src		= scene
    scene_dom.width 	= g_width 	* g_scale;
    scene_dom.height	= g_height	* g_scale;
}

/**
 *	select form cancel button
 */
function on_bg_select_form_cancel()
{
    g_bg_select_form.hide();
    _enable_windows( true );
}

/**
 *	call back function, when slider is changed
 *
 *	@slider			[in] the slider object
 *	@newvalue		[in] the new slider value
 *	@thumb			[in] ??
 *	@eOpts			[in] the operation object
 */
function on_slider_changed( slider, newValue, thumb, eOpts )
{
    g_scale = newValue / 50;
    _scene_zone_change( g_scale );
}

/**
 *	call back function, when panel c scene resize
 */
function on_resize()
{
    var setting_button	= g_panel_scene.setting_button;
    var x				= g_panel_scene.getWidth() - setting_button.getWidth() - 30;

    if ( undefined !== setting_button && !setting_button.isHidden() )
        setting_button.setLocalX( x );
}

/**
 *	the scene zone change
 *
 *	@scale		[in] the change scale
 */
function _scene_zone_change( scale )
{
    var scene_dom 		= Ext.getDom( g_bg_scene );
    scene_dom.width 	= g_width 	* scale;
    scene_dom.height	= g_height	* scale;

    var list = Ext.get( g_bg_div ).select( "dev_img" );
    Ext.each( list.elements, function( el )
    {
        var dev 	= Ext.getCmp( el.id );
        var x 		= dev.c_x * scale - dev.getWidth() / 2;
        var y 		= dev.c_y * scale - dev.getHeight() / 2;
        dev.setLocalXY( x, y );
    });

    list.destroy();
}

/**
 *	load device to scene
 */
function on_load_device( )
{
    //qt_html.load_device();
    g_device.each( function( rec ){
         add_device_panel( rec.get( "dev_id" ), rec.get( "dev_type" ), rec.get( "x" ), rec.get( "y" ), g_bg_div );
    });

    _scene_zone_change( g_scale );
}

/**
 *	build device show function
 */
function _build_device_show( panel_c_scene )
{
    panel_c_scene.show_setting_button	= show_setting_button;
    panel_c_scene.show_all_device		= show_all_device;
    panel_c_scene.show_specific_device	= show_specific_device;
}

/**
 *	show setting button
 *
 *	@showflag			[in] showing flag
 */
function show_setting_button( showflag )
{
    var setting_button	= g_panel_scene.setting_button;
    var	x;

    if ( undefined === setting_button )
        return;

    if ( "show" === showflag )
    {
        setting_button.show();

        x = g_panel_scene.getWidth() - setting_button.getWidth() - 30;
        setting_button.setLocalX( x );
    }
    else
        setting_button.hide();
}

/**
 *	show all device
 *
 *	@showflag		[in] show flag ("show" or "hide")
 *	@draggable		[in] enable or disable dragging
 */
function show_all_device( showflag, draggable )
{
    var list = Ext.get( g_bg_div ).select( "dev_img" );
    Ext.each( list.elements, function( el )
    {
        var device = Ext.getCmp( el.id );
        if ( "show" === showflag )
            device.show();
        else
            device.hide();

        if ( true === draggable )
            device.dd.enable();
        else
            device.dd.disable();
    });
}

/**
 *	enable device
 *
 *	@deviceid			[in] device id, if its value is "all_devices", all devices will be set
 *	@enable				[in] enable flag
 *	@draggabel			[in] draggable flag
 */
function enable_device( deviceid, enable, draggable )
{
    var device;
    var list = Ext.get( g_bg_div ).select( "dev_img" ); //[id^=dev_el_]" );
    if ( "all_devices" === deviceid )
    {
        Ext.each( list.elements, function( el ) {
            device = Ext.getCmp( el.id );
            if ( true === enable ) device.enable();
            else device.disable();

            if ( true === draggable ) device.dd.enable();
            else device.dd.disable();
        });
    }
    else
    {
        Ext.each( list.elements, function( el ) {
            device = Ext.getCmp( el.id );
            if ( deviceid === device.dev_type )
            {
                if ( true === enable ) device.enable();
                else device.disable();

                if ( true === draggable ) device.dd.enable();
                else device.dd.disable();
            }
        });
    }
}

/**
 *	show or hide specific device
 *
 *	@dev_type			[in] the device type
 *	@showflag			[in] the flag for visiable ("show" or "hide")
 *	@draggable			[in] flag for draggable
 */
function show_specific_device( dev_type, showflag, draggable )
{
    var list = Ext.get( g_bg_div ).select( "dev_img" );
    Ext.each( list.elements, function( el )
    {
        var dev_cmp = Ext.getCmp( el.id );
        if ( dev_type === dev_cmp.dev_type )
        {
            if ( "show" === showflag ) dev_cmp.show();
            else dev_cmp.hide();

            if ( true === draggable ) dev_cmp.dd.enable();
            else dev_cmp.dd.disable();
        }
    });
}
